<template>
  <div class="custom-float-avatar">
    <div class="avatar-container">
      <div class="avatar-wrapper">
        <img
          v-if="src"
          :src="src"
          :alt="alt"
          class="avatar-image"
          :width="imageWidth + 'px'"
          :height="imageHeight + 'px'"
        />
        <div v-if="isContent" class="hover-content" :style="{ width: width + 'px', height: imageHeight + 'px' }">
          <slot name="default">
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "CustomFloatAvatar",
  props: {
    src: {
      type: String,
      default: "",
    },
    alt: {
      type: String,
      default: "avatar",
    },
    isContent: {
      type: Boolean,
      default: false,
    },
    defaultText: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    width: {
      type: [Number, String],
      default: '100%',
    },
    // 添加图片宽高props，支持动态传入
    imageWidth: {
      type: [Number, String],
      default: 32,
    },
    imageHeight: {
      type: [Number, String],
      default: 32,
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.avatar-container {
  position: relative;
  padding-left: 10px;
}
.custom-float-avatar {
  position: absolute;
}
/* 头像包装器样式 */
.avatar-wrapper {
  position: absolute;
  z-index: 1000;
  /* 初始位置：左侧，底边对齐 */
  left: 0px;
  bottom: 0; /* 底边固定 */
  /* 小圆形尺寸 */
  width: 40px;
  height: 40px;
  border-radius: 22px 22px 22px 0;
  background-color: #3670f7;
  /* 动画过渡效果 */
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 视觉样式 */
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

/* 头像包装器悬停效果 - 变成长方形 */
.avatar-wrapper:hover {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 10px;
  /* 调整定位，确保底边不动 */
  bottom: 0; /* 保持底边固定 */
  left: 0px; /* 保持左侧位置不变 */
  /* 只增加宽度和高度（从顶部扩展） */
  width: 400px; /* 右侧变长 */
  height: 120px; /* 上边变高 */
  /* 调整内边距和内容居中 */
  padding-top: 10px;
}

/* 头像图片样式 */
.avatar-image {
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 默认头像样式 */
.default-avatar {
  background-color: #e5e7eb;
  /* display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 500;
  color: #4b5563; */
  font-size: 13px;
  transition: all 0.3s ease;
}
/* 初始隐藏hover内容 */
.hover-content {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
  padding-left: 50px;
}
/* Slot内容容器样式 */
.slot-content {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  color: white;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 悬停时显示hover内容 */
.avatar-wrapper:hover .hover-content {
  opacity: 1;
}
</style>
